<template>
  <div class="modleCls">
    <div :style="{height: toolbarHei +'px'}"></div>
    <nut-navbar title="商品编辑" left-text="返回" left-show @click-back="clickLeft"></nut-navbar>
    <div style="height: 10px;"></div>
    <div style="background-color: white;border-radius:4px;">
      <div class="tc mb10" style="font-size: 18px;color: #1e9fff;font-weight: bold;">{{props.title}}</div>
      <!--      <JForm v-model:api="fApi" v-model="state.formData" :rule="rule" />-->
      <nut-form :model-value="formModel">
        <nut-form-item label="分类">
          <JPop cat="goods_cat" v-model:id="formModel.categoryId" v-model="formModel.categoryName"></JPop>
        </nut-form-item>
        <nut-form-item label="品牌">
          <JPop cat="brand" v-model:id="formModel.brandId" v-model="formModel.brandName"></JPop>
        </nut-form-item>
        <nut-form-item label="货架">
          <JPop cat="hj" v-model="formModel.hjName" v-model:id="formModel.hjId"></JPop>
        </nut-form-item>
        <nut-form-item label="名称" required>
          <nut-input v-model="formModel.name"></nut-input>
        </nut-form-item>
        <nut-form-item label="规格" required>
          <nut-input v-model="formModel.spec"></nut-input>
        </nut-form-item>
        <nut-form-item label="大单位" required>
          <JPop cat="unit" v-model="formModel.unit1"></JPop>
        </nut-form-item>
        <nut-form-item label="小单位">
          <JPop cat="unit" v-model="formModel.unit2"></JPop>
        </nut-form-item>
        <nut-form-item label="大条码">
          <nut-input v-model="formModel.barCode"></nut-input>
        </nut-form-item>
        <nut-form-item label="小条码">
          <nut-input v-model="formModel.barCode1"></nut-input>
        </nut-form-item>
        <nut-form-item label="进价">
          <nut-input v-model="formModel.price1"></nut-input>
        </nut-form-item>
        <nut-form-item label="售价">
          <nut-input v-model="formModel.price2"></nut-input>
        </nut-form-item>
        <nut-form-item label="赠品兑换价">
          <nut-input v-model="formModel.sendPrice"></nut-input>
        </nut-form-item>
      </nut-form>
      <div style="margin-top:30px;">
        <!--        <photo @suc="uploadSuc" />-->
        <!--        <div @click="takephoto">-->
        <!--          <nut-image width="80" height="80"></nut-image>-->
        <!--        </div>-->
        <!--    <nut-uploader url="https://xxxx" capture></nut-uploader>-->
      </div>
      <div class="tc mt20 pb10">
        <nut-button  @click="clickLeft">返回</nut-button>
        <nut-button style="width: 80px;margin-left: 50px;" type="info" @click="save" :loading="state.loading">保存</nut-button>
      </div>
    </div>
  </div>

</template>
<script setup>
// 库存
import tool from "@/utils/tool";
import {useGlobal} from "@/stores/useGlobal";
import {computed, onActivated, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import JPop from "@/components/JPop.vue";
const global = useGlobal()
const props = defineProps({
  title: {type: String,default: ''}
})
const route = useRoute()
const router = useRouter()

const toolbarHei = computed(() => {
  return global.statusBarHeight
})
const emit = defineEmits(['saved'])
const formModel = ref({
  id: 0,
  imageUrl: '',
  categoryId: null,
  categoryName: '',
  name: '',
  spec: null,
  unit1: '',
  unit2: '',
  price1: null,
  price2: null,
  brandId: '',
  brandName: '',
  hjId: '',
  hjName: '',
  sendPrice: '',
  barCode: '',
  barCode1: ''
})
const state = reactive({
  formData1: {
    id: 0,
    imageUrl: '',
    categoryId: null,
    categoryName: '',
    name: '',
    spec: null,
    unit1: '',
    unit2: '',
    price1: null,
    price2: null,
    brandId: '',
    brandName: '',
    hjId: '',
    hjName: '',
    sendPrice: '',
    barCode: '',
    barCode1: ''
  },
  loading: false,
})

onActivated(() => {
  if (route.query && route.query.good) {
    let good = JSON.parse(route.query.good)
    for (let i in formModel.value) {
      if (i === 'price1') {
        formModel.value[i] = tool.xe.toNumber(good[i])
      } else if (i === 'price2') {
        formModel.value[i] = tool.xe.toNumber(good[i])
      } else {
        formModel.value[i] = good[i]
      }
    }
  } else {
    formModel.value = Object.assign({}, state.formData1)
  }
})
const uploadSuc = (fileName) => {
  formModel.value.imageUrl = fileName
  alert(fileName)
}
const clickLeft = () => {
  router.go(-1)
}
const setData = (data) => {
  if (data.id) formModel.value.id = data.id
  if (data.categoryId) formModel.value.categoryId = tool.xe.toNumber(data.categoryId)
  if (data.name) formModel.value.name = data.name
  if (data.spec) formModel.value.spec = tool.xe.toNumber(data.spec)
  if (data.unit1) formModel.value.unit1 = data.unit1
  if (data.unit2) formModel.value.unit2 = data.unit2
  if (data.price1) formModel.value.price1 = tool.xe.toNumber(data.price1)
  if (data.price2) formModel.value.price2 = tool.xe.toNumber(data.price2)
  if (data.barCode) formModel.value.barCode = data.barCode
  if (data.barCode1) formModel.value.barCode1 = data.barCode1
}

const save = () => {
  if (!formModel.value.name) return tool.err('请输入名称')
  if (!formModel.value.spec) return tool.err('请输入规格')
  if (!formModel.value.unit1) return tool.err('请输入大单位')
  if (formModel.value.unit1 === formModel.value.unit2) return tool.err('大单位不能等于小单位')
  if (formModel.value.barCode1) {
    if (!formModel.value.unit2) {
      return tool.err('有小条码就必须选择小单位')
    }
  }
  if(formModel.value.barCode && formModel.value.barCode1) {
    if (formModel.value.barCode === formModel.value.barCode1) {
      return tool.err('小条码与大条码相同')
    }
  }

  state.loading = true
  setTimeout(() => {
    state.loading = false
  }, 1000)
  tool.post('app/saveGood', {formData: formModel.value}).then(ret => {
    state.loading = false
    if (ret.stat) {
      emit('saved')
    }
  })
}


</script>
<style scoped lang="scss">

</style>


